<template lang="pug">
    div.nav-bar
        div.show-bar
            ul.bar
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.attention
                        p 关注
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.news
                        p 新闻
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.novel
                        p 小说
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.video
                        p 视频
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.life
                        p 糯米
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.map
                        p 地图
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.TieBa
                        p 贴吧
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.image
                        p 图片
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.website
                        p 网址
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.extend
                        p 推广
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.music
                        p 音乐
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.listen
                        p 畅听
                li
                    a(href="https://mbd.baidu.com/webpage?action=icard&type=subscribe&channel=wise_home")
                        div.WaiMai
                        p 外卖
</template>

<script>
	export default {
		name: "navBar",
		data() {
			return {
				mark: 1,
				nav: [
					{//第一层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "attention",
								name: "关注"
							},
							{
								navClass: "news",
								name: "新闻"
							},
							{
								navClass: "novel",
								name: "小说"
							},
							{
								navClass: "video",
								name: "视频"
							},
							{
								navClass: "life",
								name: "糯米"
							},
							{
								navClass: "map",
								name: "地图"
							}
						]
					},
					{//第2层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "attention",
								name: "关注"
							},
							{
								navClass: "news",
								name: "新闻"
							},
							{
								navClass: "novel",
								name: "小说"
							},
							{
								navClass: "video",
								name: "视频"
							},
							{
								navClass: "life",
								name: "糯米"
							},
							{
								navClass: "map",
								name: "地图"
							}
						]
					}, {//第一层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "TieBa",
								name: "贴吧"
							},
							{
								navClass: "image",
								name: "图片"
							},
							{
								navClass: "website",
								name: "网址"
							},
							{
								navClass: "extend",
								name: "推广"
							},
							{
								navClass: "music",
								name: "音乐"
							},
							{
								navClass: "listen",
								name: "畅听"
							}
						]
					},
					{//第3层li遍历时候循环的icon
						navIcon: [
							{
								navClass: "WaiMai",
								name: "外卖"
							},
						]
					}
				],
			}
		},
		methods: {
			left() {
				this.mark++;
				if (this.mark === 4) {
					this.mark = 1
				}
			},
			right() {
				this.mark--;
				if (this.mark < 1) {
					this.mark = 3
				}
			}
		}
	}
</script>

<style scoped lang="stylus">
    // 因此nav 的滚轮 但是还能滚动只限制与 chrome 和 safari
    ::-webkit-scrollbar
        display: none

    .nav-bar
        .show-bar
            overflow-x scroll
            .bar
                list-style-type none
                display: inline-block
                width 21.4933333333rem
                li
                    float: left
                    width 0.8rem
                    padding 0 0.426666666667rem
                    a
                        text-decoration none
                        display inline-block
                        font-size 0.3466666667rem
                        div
                            background url("../../assets/img/icons/home/nav.png") no-repeat
                            background-size: 0.586666666667rem auto;
                            width 0.586666666667rem
                            height 0.586666666667rem
                            margin auto
                        .attention
                            background-position: 0 -7.62666666667rem
                        .news
                            background-position: 0 -11.14666666667rem
                        .novel
                            background-position: 0 -9.386666666667rem
                        .video
                            background-position: 0 -12.90666666667rem
                        .life
                            background-position: 0 -11.733333333333rem
                        .map
                            background-position: 0 -8.8rem
                        .TieBa
                            background-position: 0 -13.49333333333rem
                        .image
                            background-position: 0 -8.21333333333333rem
                        .website
                            background-position: 0 -12.32rem
                        .extend
                            background-position: 0 -10.56rem
                        .music
                            background-position: 0 -14.08rem
                        .listen
                            background-position: 0 -14.66666667rem
                        .WaiMai
                            background-position: 0 -15.8666666667rem
                        p
                            color #999
</style>
